<template>
    <div
        class="echarts-map"
        ref="echartsMapRef"
        :style="{
            width:width,
            height:height
        }">
    </div>
</template>

<script setup lang="ts">
import type {EChartsOption} from 'echarts';
import * as echarts from 'echarts';

const props = withDefaults(defineProps<{
    options: EChartsOption;
    width?: string;
    height?: string;
    mapName?: string;
    geoJson: any,
}>(), {
    width: '500px',
    height: '500px',
    mapName: 'EChartMap',
});
const echartsMapRef = ref<HTMLElement>();
let mapInstance: any = undefined;
onMounted(() => {
    echarts.registerMap(props.mapName, props.geoJson);
    mapInstance = echarts.init(unref(echartsMapRef));
    mapInstance.setOption(props.options);
});
watch(() => props.options, () => {
    if (mapInstance) {
        console.log(`地图：${props.options.title!['text']} 的配置项发生变化`, props.options);
        mapInstance.setOption(props.options, {
            notMerge: true,
        });
    }
}, {deep: true});
</script>
<style scoped>
.echarts-map {
    border: 1px solid silver;
}
</style>
